<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 600px;
        height: 600px;
        border: 1px solid;
        margin: 0 auto;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="container"></div>
    <script>
      // 利用方块画身体；
      // 定义一个方块类 生产方块
      let containerEle = document.querySelector(".container");
      function Rect(x, y, color) {
        // 方块的x坐标
        this.x = x;
        this.y = y; //方块的y坐标
        this.color = color; //方块的颜色
        this.createRect(); //生成方块的方法
      }

      Rect.prototype.createRect = function () {
        this.rectEle = document.createElement("div"); // 创建元素 和方块对象的rectEle绑定
        this.rectEle.style.width = "50px";
        this.rectEle.style.height = "50px";
        this.rectEle.style.position = "absolute";
        this.rectEle.style.left = this.x + "px";
        this.rectEle.style.top = this.y + "px";
        this.rectEle.style.background = this.color; // 设置方块的颜色
        this.rectEle.style.border = "1px solid";
      };

      //创建食物
      function Food(container) {
        this.container = container;
        this.x = 0;
        this.y = 0;
      }
      Food.prototype.createFood = function () {
        this.x = randomNum(0, 550);
        this.y = randomNum(0, 550);
        let rect = new Rect(this.x, this.y, "yellow");
        this.rect = rect;
        this.container.appendChild(rect.rectEle);
      };
      Food.prototype.removeFood = function () {
        this.rect.rectEle.remove();
      };

      let food = new Food(containerEle);

      food.createFood();

      // let rect1 = new Rect(0,0,"blue");
      // let rect2 = new Rect(50,0,"blue");
      // console.log(rect1);
      // let containerEle = document.querySelector(".container");
      // containerEle.appendChild(rect1.rectEle);
      // containerEle.appendChild(rect2.rectEle);

      // 创建蛇类；
      function Snake(containerEle) {
        this.containerEle = containerEle; // 容器 蛇的身体应该放在哪个容器里面 我们这里就是dom中的container
        this.body = []; //蛇的身体  ，由多少个rect构成的；
        this.createBody(); //创建蛇的身体 创建完成后this.body里就有内容了；
        console.log(this.body);
        this.renderDom(); //把每一个 rect中的rectEle元素 添加到 dom中；
        this.dir = "right";
        this.isDie = false;
      }

      Snake.prototype.createBody = function () {
        for (let i = 0; i < 5; i++) {
          //循环生成方块组成蛇的身体
          let rect;
          if (i == 4) {
            rect = new Rect(i * 50, 0, "red"); //如果是蛇头设置颜色为红色
          } else {
            rect = new Rect(i * 50, 0, "blue"); //蛇身体设置颜色蓝色
          }

          this.body.push(rect); //把蛇身体加到body数组中
        }
      };

      // 蛇动起来
      Snake.prototype.move = function () {
        // 移动蛇头 移动一格  ，在原来蛇头的位置加上一个蓝色方块； 把最后一个方块删除掉；
        // 蛇头现在的x轴的位置；
        var leftNum = parseInt(
          this.body[this.body.length - 1].rectEle.style.left
        );
        var topNum = parseInt(
          this.body[this.body.length - 1].rectEle.style.top
        );
        console.log(leftNum);
        switch (this.dir) {
          case "right":
            this.body[this.body.length - 1].rectEle.style.left =
              leftNum + 50 + "px";
            break;
          case "left":
            this.body[this.body.length - 1].rectEle.style.left =
              leftNum - 50 + "px";
            break;
          case "up":
            this.body[this.body.length - 1].rectEle.style.top =
              topNum - 50 + "px";
            break;
          case "down":
            // console.log(topNum);
            this.body[this.body.length - 1].rectEle.style.top =
              topNum + 50 + "px";
            break;
        }
        // if (leftNum >= 500) {
        //     this.isDie = true;
        // }
        // 检测蛇头和food的碰撞；
        let head = this.body[this.body.length - 1];

        let AminX = head.rectEle.offsetLeft;
        let AmaxX = AminX + head.rectEle.offsetWidth;

        let AminY = head.rectEle.offsetTop;
        let AmaxY = AminY + head.rectEle.offsetHeight;

        let BminX = food.rect.rectEle.offsetLeft;
        let BmaxX = food.rect.rectEle.offsetWidth + BminX;

        let BminY = food.rect.rectEle.offsetTop;
        let BmaxY = food.rect.rectEle.offsetHeight + BminY;
        console.log(leftNum);
        let rect = new Rect(leftNum, topNum, "blue");
        //    console.log(this.length);
        this.body.splice(this.body.length - 1, 0, rect);
        if (AmaxX > BminX && AminX < BmaxX && AmaxY > BminY && AminY < BmaxY) {
          console.log("碰了");
          food.removeFood();
          food.createFood();
        } else {
          this.body[0].rectEle.remove();
          this.body.shift();
        }

        //    console.log(this.body);

        // 删除最有一个元素，this.body里的对象也删除

        this.renderDom();
      };

      // 把蛇渲染到视图
      Snake.prototype.renderDom = function () {
        this.body.forEach((rect) => {
          //循环把蛇身体中的rectEle添加到containerEle里面
          this.containerEle.appendChild(rect.rectEle);
        });
      };

      let snake = new Snake(containerEle); //实例化调用蛇类；同时也实例化了 rect
      document.onkeydown = function (e) {
        var key = e.key;
        console.log(key);
        switch (key) {
          case "ArrowLeft":
            if (snake.dir != "right") {
              snake.dir = "left";
            }
            break;
          case "ArrowRight":
            snake.dir = "right";
            break;
          case "ArrowUp":
            snake.dir = "up";
            break;
          case "ArrowDown":
            snake.dir = "down";
            break;
        }
      };

      var timer = setInterval(() => {
        console.log(snake.isDie);
        if (snake.isDie) {
          clearInterval(timer);
        }
        snake.move();
      }, 1000);

      function randomNum(min, max) {
        return parseInt(Math.random() * (max + 1 - min)) + min;
      }
    </script>
  </body>
</html>
